import { useEffect, useRef, useState } from 'react';
import logo from './logo.svg'
import './App.css'

function App() {
  const [count, setCount] = useState(0)

  return (
    <div className="App">
      <Dong></Dong>
    </div>
  )
}


function Dong() {
  const ref = useRef(1);

  const [, setState] = useState();

  useEffect(() => {
    console.log(111);
  });

  useEffect(() => {
    console.log(222);
  }, []);

  useEffect(() => {
    console.log(333);
  }, [ref.current]);

  useEffect(() => {
    setInterval(() => {
      setState([]);
    }, 1000);

    setTimeout(() => {
      ref.current = 2;
    }, 3000);
  }, []);

  return <div>dong</div>;
  /* 打印结果：
      111 每次都会打印，因为第二个参数为 undefined。

      222 只打印一次，因为第二个参数为 []。 

      333 打印两次，因为第二个参数有一个依赖，这个依赖在 2s 的时候会变一次。  

      ！！！！！！ hook.memorizedState 存取元素的。这就是 hook 的通用原理。

      其次useEffect根据依赖性来确定是否进行重新渲染，需要根据一个areHookInputsEqual(nextDeps,prevDeps)来进行判断是否重新渲染，
      其中nextDeps和prevDeps分别代表下次的依赖性和上次的依赖项

      function areHookInputsEqual(nextDeps,prevDeps){
        if(prevDeps === null){
          {
            error('.....')
          }
           // 上次的依赖项为空，不管如何重新渲染都要指向
          return false  
        }

        for(var i=0;i<prevDeps.length && i < nextDeps.length; i++){
          if(objectIs(nextDeps[i],prevDeps[i])){ 
            // 当新旧依赖项 有一项不同，则返回false，重新渲染的时候需要执行
            // 并且通过比较会发现只需要保证nextDeps 和 prevDeps 每一项值相同即使得useEffect不会重新渲染
            // 因此useEffect 参数是浅比较！！！！！！！
            continue;
          }
          return false
        }
        return true
      }

  */
}



export default App
